<template>
      <div
            :class="['fixed header-card w_100 z-999', data.scrollTopChange ? 'bg-transparent' : 'bg-write',
                  { 'header-card-active bg-write': data.headerActive }, { 'header-card-hidden': data.headerBarHidden }]">
 
            <!-- header 导航栏 -->
            <div class="constraint menu-bar flex ali-center">
                  <div class="pc-dis flex more" @click="getOpenModel()">
                        <svg t="1698563385845" class="icon" viewBox="0 0 1024 1024" version="1.1"
                              xmlns="http://www.w3.org/2000/svg" p-id="25965" width="23" height="23">
                              <path d="M81.28 222.016h861.44c27.264 0 49.28-21.504 49.28-48s-22.016-48-49.28-48H81.28c-27.2 0-49.28 21.504-49.28 48s22.08 48 49.28 48zM942.72 462.016H81.28c-27.264 0-49.28 21.504-49.28 48s22.016 48 49.28 48h861.44c27.264 0 49.28-21.504 49.28-48s-22.144-48-49.28-48zM942.72 801.984H81.28c-27.2 0-49.28 21.504-49.28 48s22.08 48 49.28 48h861.44c27.264 0 49.28-21.504 49.28-48s-22.016-48-49.28-48z"
                                    fill="#2c2c2c" p-id="25966"></path>
                        </svg>
                  </div>
                  <p class="header-logo-box"> 
                        <RouterLink to="/home.html">
                              <img :src=" !data.scrollTopChange || data.headerActive ? require('@/assets/logo-en.png') : require('@/assets/logo-en-write.png')" />
                        </RouterLink>
                  </p>
                  <div :class="['menu-nav-area', { 'open-show': data.drawer }]">
                        <nav class="flex item-column">
                              <p class="header-drawer-close pc-dis" @click="handleClose()">
                                    <svg t="1698560217110" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                          xmlns="http://www.w3.org/2000/svg" p-id="10632" width="25" height="25">
                                          <path d="M572.269714 512l303.250286-351.085714c5.12-5.778286 0.731429-14.628571-7.021714-14.628572h-92.16a19.017143 19.017143 0 0 0-14.262857 6.363429L512 442.221714 261.851429 152.649143A18.651429 18.651429 0 0 0 247.808 146.285714h-92.16c-7.899429 0-12.141714 8.850286-7.094857 14.628572L451.730286 512 148.48 863.085714c-5.12 5.778286-0.731429 14.628571 7.021714 14.628572h92.16a19.017143 19.017143 0 0 0 14.262857-6.363429L512 581.778286l250.148571 289.572571a18.651429 18.651429 0 0 0 14.116572 6.363429h92.16c7.899429 0 12.141714-8.850286 7.094857-14.628572L572.269714 512z"
                                                fill="#0d0d0d" fill-opacity=".65" p-id="10633"></path>
                                    </svg>
                              </p>
                              <div class="menu-list-area" @mouseenter="getMenuBarMouseChange(0)"
                                    @mouseleave="getMenuBarMouseChange(1)">
                                    <ul class="menu-cards flex item-column">
                                          <li class="menu-list relative flex ali-center jus-center" v-for="(headItem, headIndex) in headerList"
                                                :key="headIndex" @mouseenter="getMenuBtnMouseChange(headIndex)"
                                                @mouseleave="getMenuBtnMouseChange(-1)" @click="getRoutingJump(headItem.path, '')">
                                                <a href="javascript:;">
                                                      <span class="ft-bold">{{ headItem.text }}</span>

                                                      <ul
                                                            :class="['sub-cards mobile-dis', { 'sub-cards-active': data.navBtnActive == headIndex + 1 }]">
                                                            <li class="sub-list ft-center"
                                                                  v-for="(subItem, subIndex) in headItem.subList"
                                                                  :key="subIndex"
                                                                  @click.stop="getRoutingJump(subItem.path, subItem.anchor_point)">
                                                                  <a :href="subItem.path + '#' + subItem.anchor_point">{{ subItem.sub_text }}</a>
                                                            </li>
                                                      </ul>
                                                </a>
                                          </li>
                                    </ul>
                              </div>
                              <div class="language-area flex ali-center jus-space-bet mar-lft">
                                    <a :class="['relative language-text', { 'language-active': languageIndex == 0 }]" href=""
                                          v-for="(languageItem, languageIndex) in headerLanguageOptionList"
                                          :key="languageIndex">
                                          {{ languageItem.languageText }}
                                    </a>
                              </div>
                        </nav>
                  </div>
            </div>
      </div>
</template>

<script lang="ts" setup>
import { onMounted, onUnmounted, reactive, ref } from 'vue';
import { useI18n } from 'vue-i18n'
import { useRouter } from 'vue-router';

import { headerList, headerLanguageOptionList } from '@/config/assets.config'

const router = useRouter();

// 定义i18n的locale变量
let { locale } = useI18n()

// props 数据传参
let propData = defineProps({ isTransparentBackground: { default: false }, scrollDisable: { default: true } })

// 定义响应式变量
let data = reactive({
      // 弹框默认值 显示/隐藏
      drawer: false,
      languageIndex: 0,
      navBtnActive: 0,
      // 鼠标移入激活head area背景色不透明
      headerActive: false,
      headerBarHidden: false,
      scrollTopVal: 0,
      // 滚动条禁用
      scrollDisable: propData.scrollDisable,
      // 当前页导航栏是否为透明
      scrollTopChange: propData.isTransparentBackground
})

/**
 * head menu 菜单栏鼠标移入移出触发函数
 * @param event 标识移入/移出
 */
let getMenuBarMouseChange = (event: number) => {
      if (event == 0) {
            data.headerActive = true
      } else {
            data.headerActive = false
      }
}

/**
 * head menu 菜单栏按钮鼠标移入移出时触发函数
 * @param event 标识移入/移出
 */
let getMenuBtnMouseChange = (event: number) => {
      if (event >= -1) {
            data.navBtnActive = event + 1
      } else {
            data.navBtnActive = event
      }
}

/**
 * 国际化 i18n 语言切换函数
 * @param e 切换语言的下标
 */
let getOptionLanguage = (e: number) => {
      let lang = e == 0 ? 'zh-cn' : e == 1 ? 'zh-hk' : 'en-us'
      data.languageIndex = e
      locale.value = lang
      console.log(locale.value)
}

/**
 * 父组件Home调用函数
 * 页面滚动条大于指定高度header背景颜色改变
 * @param scrollTop 当前滚动条的值
 */
let scrollBarChangeProcess = () => {
      let scrollTop = document.documentElement.scrollTop
      let bol = scrollTop > 200 ? false : true
      if (!data.scrollDisable) {
            data.scrollTopChange = bol
      }
      if (scrollTop > 420) {
            data.headerBarHidden = true
      } else {
            data.headerBarHidden = false
      }
      let scrollTopStep = scrollTop - data.scrollTopVal
      data.scrollTopVal = scrollTop
      if (scrollTopStep < 0) {
            data.headerBarHidden = false
      }
}

/**
 * 路由跳转
 */
let getRoutingJump = (path: string, anchorPoint: string) => {
      router.push({ path: path })
}

let getOpenModel = () => {
      data.drawer = true
}

let handleClose = () => {
      data.drawer = false
}

/**
 * 组件加载时触发的钩子函数
 */
onMounted(() => {
      document.addEventListener('scroll', scrollBarChangeProcess)
})

/**
 * 组件卸载时触发的钩子函数
 */
onUnmounted(() => {
      document.removeEventListener('scroll', scrollBarChangeProcess)
})

/**
 * 函数暴露, 组件内部使用无需暴露
 */
defineExpose({ scrollBarChangeProcess })
</script>